﻿<template>
  <div class="residents-container">
    <el-dialog
      v-model="dialogObj.isDialogVisible"
      :title="dialogObj.editResidentsTitle"
      width="750px"
      top="10vh"
      modal-class="res-add"
      @close="closeDialog"
    >
      <div class="res-add-content">
        <el-form
          ref="ruleForm"
          :model="ruleForm"
          label-width="130px"
          :rules="rules"
        >
          <el-col
            :xs="24"
            :sm="24"
            :md="24"
            :lg="24"
            :xl="24"
            class="mb20 flex_center"
          >
            <el-form-item label="病种：" prop="disease">
              <!-- <el-select
                v-model="ruleForm.disease"
                placeholder="请选择病种"
                style="width: 300px; height: 32px"
                ><el-option label="高血压" value="高血压"></el-option>
                <el-option label="糖尿病" value="糖尿病"></el-option>
                <el-option label="慢阻肺" value="慢阻肺"></el-option>
                <el-option label="冠心病" value="冠心病"></el-option>
                <el-option
                  label="慢性乙型肝炎"
                  value="慢性乙型肝炎"
                ></el-option>
                <el-option
                  label="心脑血管疾病后遗症"
                  value="心脑血管疾病后遗症"
                ></el-option>
                <el-option label="其他" value="其他"></el-option>
              </el-select> -->
              <el-select v-model="ruleForm.disease" placeholder="请选择病种" style="width: 300px; height: 32px">
              <el-option
                v-for="item in dialogObj.diseaseTypes"
                :key="item.id"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
            </el-form-item>
          </el-col>
          <el-row :gutter="20">
            <el-col
              :xs="24"
              :sm="24"
              :md="24"
              :lg="24"
              :xl="24"
              class="mb20 flex_center"
            >
              <el-form-item label="药品分类：" prop="drugType">
                <el-input
                  v-model="ruleForm.drugType"
                  style="width: 300px"
                  placeholder="请输入药品分类"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col
              :xs="24"
              :sm="24"
              :md="24"
              :lg="24"
              :xl="24"
              class="mb20 flex_center"
            >
              <el-form-item label="药品名称：" prop="drugName">
                <el-input
                  v-model="ruleForm.drugName"
                  style="width: 300px"
                  placeholder="请输入药品名称"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col
              :xs="24"
              :sm="24"
              :md="24"
              :lg="24"
              :xl="24"
              class="mb20 flex_center"
            >
              <el-form-item label="药品规格：" prop="specifications">
                <el-input
                  v-model="ruleForm.specifications"
                  style="width: 300px"
                  placeholder="请输入药品规格"
                ></el-input>
              </el-form-item>
            </el-col>

            <el-col
              :xs="24"
              :sm="24"
              :md="24"
              :lg="24"
              :xl="24"
              class="mb20 flex_center"
            >
              <el-form-item
                label="处方显示名称："
                prop="allName"
              >
                <el-input
                  v-model="ruleForm.allName"
                  style="width: 300px"
                  placeholder="请输入处方显示名称"
                ></el-input>
              </el-form-item>
            </el-col>

            <el-col
              :xs="24"
              :sm="24"
              :md="24"
              :lg="24"
              :xl="24"
              class="mb20 flex_center"
            >
              <el-form-item label="备注：" prop="remark">
                <el-input
                  v-model="ruleForm.remark"
                  style="width: 300px"
                  type="textarea"
                  placeholder="请输入备注"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="closeDialog" size="large">取 消</el-button>
          <el-button type="primary" @click="onSubmit" size="large"
            >确 定</el-button
          >
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { parseISO } from "date-fns";
import http from "@/utils/request";
import { ElMessage } from "element-plus";
export default {
  props: {
    dialogObj: {
      type: Object,
      default: () => ({
        isDialogVisible: false,
        editResidentsTitle: "",
        DialogDate: {},
        diseaseTypes:[]
      }),
    },
  },
  data() {
    const validtrue = (rule, value, callback) => {
      if (!value) {
        callback(new Error("此项为必填"));
      } else {
        callback();
      }
    };
    //姓名
    const validname = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请输入姓名"));
      } else if (!/^[\u4e00-\u9fa5A-Za-z]+$/.test(value)) {
        callback(new Error("请输入正确的姓名"));
      } else {
        callback();
      }
    };
    //性别
    const validsex = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请选择性别"));
      } else {
        callback();
      }
    };
    //身份证
    const validatorIdCard = (rule, value, callback) => {
      if (value == "") {
        callback(new Error("请输入证件号码"));
      } else if (
        !/^[1-9]\d{5}(18|19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}[\dXx]$/i.test(
          value
        )
      ) {
        callback(new Error("请输入正确的身份证号"));
      } else {
        callback();
      }
    };
    const validatdateOfBirth = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请选择正确的出生日期"));
      } else {
        callback();
      }
    };

    return {
      pickerOptions1: {
        disabledDate(time) {
          return time.getTime() < Date.now();
        },
      },
      isshow: true,
      tipshow: true,
      inspectionTime: new Date(),
      // 基本信息
      ruleForm: {
        disease: "", // 病种
        drugType: "", // 药品分类
        drugName: "", // 药品名称
        specifications: "", // 药品规格
        allName: "", // 处方显示名称
        remark: "", // 备注
      },
      rules: {
        drugName: [
          { required: true, message: "请输入药品名称", trigger: "blur" },
        ],
        specifications: [
          { required: true, message: "请输入药品规格", trigger: "blur" },
        ],
      },
    };
  },

  methods: {
    //关闭弹窗
    closeDialog() {
      this.dialogObj.isDialogVisible = false;
      this.$refs.ruleForm.resetFields();
    },
    //提交
    onSubmit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          if (this.dialogObj.editResidentsTitle == "新增药品") {
            http.post("/drug/addSingleDrug", this.ruleForm).then((res) => {
              if (res.code == 200) {
                ElMessage.success(res.message);
                
                this.$emit("changeDrug", false);
              }
            });
          }
          if (this.dialogObj.editResidentsTitle == "编辑药品") {
            http.post("/drug/update", this.ruleForm).then((res) => {
              if (res.code == 200) {
                ElMessage.success(res.message);
                this.$emit("changeDrug", false);
              }
            });
          }

          this.dialogObj.isDialogVisible = false;
        } else {
          return false;
        }
      });
    },
    //处理时间日期
    getNextYearDate() {
      const date = new Date();
      const nextYear = date.getFullYear() + 1;
      const month = String(date.getMonth() + 1).padStart(2, "0");
      const day = String(date.getDate()).padStart(2, "0");
      return `${nextYear}-${month}-${day}`;
    },
    getCurrentDate() {
      const date = new Date();
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, "0");
      const day = String(date.getDate()).padStart(2, "0");
      return `${year}-${month}-${day}`;
    },

    //日期格式转换
    parseDate(value) {
      if (typeof value === "string" || value instanceof String) {
        return parseISO(value);
      } else {
        return value; // 假设它已经是一个 Date 对象
      }
    },
  },
  watch: {
    dialogObj: {
      handler(newVal, oldVal) {
        if(newVal.editResidentsTitle=="新增药品"){
          this.ruleForm={};
        }else{
          this.ruleForm = {...newVal.DialogDate};
        }
     
      },
      deep: true, // 深度监听，确保对象内部属性的变化也能被监听到
    },
  },
  mounted() {},
};
</script>

<style scoped>
.residents-container {
  box-sizing: border-box;
  -ms-overflow-style: none !important; /* 适用于IE和Edge */
  scrollbar-width: none !important; /* 适用于Firefox */
}
.res-add-content {
  overflow-y: auto;
  box-sizing: border-box;
  -ms-overflow-style: none !important; /* 适用于IE和Edge */
  scrollbar-width: none !important; /* 适用于Firefox */
}
.res-add-content::-webkit-scrollbar {
  display: none !important;
}
:deep(.el-input__wrapper) {
  width: 280px !important;
}
:deep(.el-form-item .el-select__wrapper) {
  min-height: 32px;
  width: 100% !important;
}
.ml20 {
  margin-left: 25px;
}
.flex {
  display: flex;
}
.el-radio.is-bordered {
  padding: 0 50px 0 50px;
  height: 32px;
}
.shell {
  width: 100%;
  border: 1px solid #ccc;
}
:deep(.el-checkbox-group) {
  display: flex;
  flex-wrap: wrap;
}
:deep(.el-checkbox) {
  margin-right: 18px;
}
:deep(.el-input-group__append) {
  width: 52px;
}
/* :deep(.el-checkbox__inner) {
  border-radius: 50%;
} */
:deep(.el-dialog__header) {
  background-color: #016dff;
  margin: 0;
  height: 30px;
  margin-bottom: 30px;
}
:deep(.el-dialog__title) {
  color: #fff;
}
:deep(.el-dialog__headerbtn .el-dialog__close) {
  color: #fff;
  font-size: 30px;
}
:deep(.el-form-item--large .el-form-item__content) {
  margin-left: 0 !important;
}
.title_box {
  width: 150px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  border: 1px solid #000;
  background-color: #ccc;
}
.iconBox {
  font-size: 25px;
  /* position: absolute;
  right: 168px;
  top: 68px; */
  cursor: pointer;
  margin-left: 15px;
}
.flexBox {
  display: flex;
  margin-bottom: 20px;
}
.flexB {
  display: flex;
  justify-content: end;
}
.bing {
  padding-left: 174px;
}
.tip {
  font-size: 12px;
  color: red;
  z-index: 9;
}
.mb20 {
  margin-bottom: 20px;
}
.flex_center {
  display: flex;
  justify-content: center;
}
</style>
